<template>
  <div id="pulse-gate-container"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export default {
  name: "PulseGate",
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      portalMesh: null,
      lines: [],
      numLines: 16,
      animationProgress: 0,
    };
  },
  mounted() {
    this.initThreeScene();
    this.animate();
  },
  methods: {
    initThreeScene() {
      // 创建场景
      this.scene = new THREE.Scene();

      // 创建相机
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.camera.position.z = 5;

      // 创建渲染器
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document
        .getElementById("pulse-gate-container")
        .appendChild(this.renderer.domElement);

      // 创建脉门的几何体（这里以圆环为例）
      const portalGeometry = new THREE.TorusGeometry(0.5, 0.05, 10, 100);
      // 创建发光材质（简单的发光材质示例）
      const portalMaterial = new THREE.MeshBasicMaterial({
        color: 0x00ffff,
        transparent: true,
        opacity: 0.6,
        side: THREE.DoubleSide,
      });
      this.portalMesh = new THREE.Mesh(portalGeometry, portalMaterial);
      this.portalMesh.rotateX(-Math.PI / 6)
      this.scene.add(this.portalMesh);
      let controls = new OrbitControls(this.camera, this.renderer.domElement);

      // 创建光线效果（这里用线条来模拟，从圆环中心向外发射的多条线）
      for (let i = 0; i < this.numLines; i++) {
        const points = [];
        points.push(new THREE.Vector3(0, 0, 0));
        const endPoint = new THREE.Vector3(
          Math.cos(i * ((2 * Math.PI) / this.numLines)),
          Math.sin(i * ((2 * Math.PI) / this.numLines)),
          0
        ).multiplyScalar(3);
        points.push(endPoint);
        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
        const lineMaterial = new THREE.LineBasicMaterial({
          color: 0x00ffff,
          transparent: true,
          opacity: 0.8,
        });
        const line = new THREE.Line(lineGeometry, lineMaterial);
        this.lines.push(line);
        //   this.scene.add(line);
      }
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.portalMesh.rotateX(-Math.PI / 100)
      this.portalMesh.rotateY(-Math.PI / 100)
      this.portalMesh.rotateZ(-Math.PI / 100)

      // 增加动画进度
      this.animationProgress += 0.01;

      // 根据动画进度更新脉门的旋转和缩放
      this.portalMesh.scale.x = this.portalMesh.scale.y += 0.02;
      this.portalMesh.material.opacity -= 0.01;

      if (this.portalMesh.scale.x > 2) {
        this.portalMesh.scale.x = this.portalMesh.scale.y = 0;
        this.portalMesh.material.opacity = 1;
      }

      // 更新光线的旋转、缩放及透明度变化（模拟闪烁效果）
      this.lines.forEach((line) => {
        line.rotation.z += 0.02;
        line.scale.x = line.scale.y = Math.min(
          1.5,
          1 + 0.5 * Math.sin(this.animationProgress * 3)
        );
        line.material.opacity =
          0.5 + 0.3 * Math.sin(this.animationProgress * 4);
      });

      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<style scoped>
#pulse-gate-container {
  width: 100%;
  height: 500px;
}
</style>
